import React, { Component } from 'react'
// 过渡动画js库
import { CSSTransition } from 'react-transition-group'
// css动画库
import '../assets/animate.min.css'

const withTransition = Cmp => {
  return class extends Component {

    render() {
      return (
        <CSSTransition
          // 此处的true或false如何来动态解决 
          // 利用 Route中的children中匹配为对象不匹配为null，以此为条件返回true/false
          in={this.props.match !== null}
          timeout={600}
          classNames={{
            enter: 'animate__animated',
            exit: 'animate__animated',
            enterActive: 'animate__fadeIn',
            exitActive: 'animate__fadeOut'
          }}
          unmountOnExit
        >
          <Cmp {...this.props} />
        </CSSTransition>
      )
    }
  }
}
export default withTransition